Tải tài nguyên mạnh mẽ trong React: Làm chủ Error Boundaries với Hooks

Trong các ứng dụng web hiện đại, việc tải tài nguyên một cách bất đồng bộ là một thực hành phổ biến. Dù là tìm nạp dữ liệu từ API, tải hình ảnh, hay nhập các module, việc xử lý các lỗi tiềm ẩn trong quá trình tải tài nguyên là rất quan trọng để có một trải nghiệm người dùng mượt mà. React Error Boundaries cung cấp một cơ chế để bắt các lỗi JavaScript ở bất cứ đâu trong cây component con của chúng, ghi lại các lỗi đó, và hiển thị một giao diện người dùng dự phòng (fallback UI) thay vì làm sập toàn bộ ứng dụng. Bài viết này khám phá cách sử dụng Error Boundaries một cách hiệu quả kết hợp với React Hooks để quản lý các lỗi tải tài nguyên.

Tìm hiểu về Error Boundaries

Trước React 16, các lỗi JavaScript không được xử lý trong quá trình render component sẽ làm hỏng trạng thái nội bộ của React và gây ra các lỗi khó hiểu trong những lần render tiếp theo. Error Boundaries giải quyết vấn đề này bằng cách hoạt động như những khối bắt lỗi chung cho các lỗi xảy ra trong các component con của chúng. Chúng là các component React triển khai một hoặc cả hai phương thức vòng đời sau:

• static getDerivedStateFromError(error): Phương thức tĩnh này được gọi sau khi một lỗi được ném ra bởi một component con. Nó nhận lỗi đã được ném ra làm đối số và trả về một giá trị để cập nhật trạng thái của component.
• componentDidCatch(error, info): Phương thức vòng đời này được gọi sau khi một lỗi được ném ra bởi một component con. Nó nhận lỗi đã được ném ra làm đối số, cũng như một đối tượng chứa thông tin về component nào đã ném ra lỗi. Bạn có thể sử dụng nó để ghi lại thông tin lỗi.

Quan trọng là, Error Boundaries chỉ bắt các lỗi trong giai đoạn rendering, trong các phương thức vòng đời, và trong các hàm khởi tạo của toàn bộ cây bên dưới chúng. Chúng không bắt lỗi cho:

• Trình xử lý sự kiện (tìm hiểu thêm trong phần bên dưới)
• Mã bất đồng bộ (ví dụ: các hàm callback của setTimeout hoặc requestAnimationFrame)
• Kết xuất phía máy chủ (Server-side rendering)
• Lỗi được ném ra trong chính Error Boundary (thay vì trong các component con của nó)

Error Boundaries và React Hooks: Một sự kết hợp mạnh mẽ

Trong khi các class component thường được sử dụng để triển khai Error Boundaries, React Hooks cung cấp một cách tiếp cận hàm (functional) ngắn gọn và súc tích hơn. Chúng ta có thể tạo một hook useErrorBoundary có thể tái sử dụng để đóng gói logic xử lý lỗi và cung cấp một cách thuận tiện để bọc các component có thể ném ra lỗi trong quá trình tải tài nguyên.

Tạo một Hook useErrorBoundary tùy chỉnh

Đây là một ví dụ về hook useErrorBoundary:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Giải thích:

• useState: Chúng tôi sử dụng useState để quản lý trạng thái lỗi. Ban đầu, nó đặt lỗi là null.
• useCallback: Chúng tôi sử dụng useCallback để ghi nhớ (memoize) các hàm resetError và captureError. Đây là một thực hành tốt để ngăn chặn các lần render lại không cần thiết nếu các hàm này được truyền xuống dưới dạng props.
• Component ErrorBoundary: Đây là một functional component được tạo bằng useCallback, nhận vào children và một prop fallback tùy chọn. Nếu có lỗi trong trạng thái, nó sẽ render component fallback được cung cấp hoặc một thông báo lỗi mặc định. Nếu không, nó sẽ render các children. Nó hoạt động như Error Boundary của chúng ta. Mảng phụ thuộc `[error]` đảm bảo nó sẽ render lại khi trạng thái `error` thay đổi.
• Hàm captureError: Hàm này được sử dụng để thiết lập trạng thái lỗi. Bạn sẽ gọi hàm này trong một khối try...catch khi tải tài nguyên.
• Hàm resetError: Hàm này xóa trạng thái lỗi, cho phép component render lại các children của nó (có thể thử lại việc tải tài nguyên).

Triển khai tải tài nguyên với xử lý lỗi

Bây giờ, hãy xem cách sử dụng hook này để xử lý lỗi tải tài nguyên. Hãy xem xét một component tìm nạp dữ liệu người dùng từ một API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry